<template>
  <div class="container">
    <div class="header">
      <div class="btns">
        <div>
          <el-button class="btn" @click="addInfo">新增</el-button>
          <el-button class="btn">导出</el-button>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="拜访对象"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="date" label="拜访日期" align="center">
        </el-table-column>
        <el-table-column
          prop="location"
          label="拜访地点"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goal"
          label="拜访目的"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="details"
          label="拜访详情"
          width="150px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="dialogFormVisible = true"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination>
    </div>
    <div class="addForm">
      <el-dialog title="拜访信息" :visible.sync="dialogFormVisible">
        <el-form :model="addForm" label-width="100px">
          <el-form-item label="拜访对象">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="拜访目的">
            <el-input v-model="addForm.goal" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="拜访地点">
            <el-input v-model="addForm.location" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="拜访日期">
            <el-date-picker
              v-model="addForm.date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="拜访详情">
            <el-input v-model="addForm.details" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button
            class="btn"
            type="primary"
            @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        position: '',
        gender: '',
      },
      total: 0,
      tableData: [
        {
          index: '1',
          name: '张顺',
          date: '1996-10-17',
          location: '楼下烧烤摊',
          goal: '签定合同',
          details: '客户满意',
        },
        {
          index: '2',
          name: '张顺',
          date: '1996-10-17',
          location: '楼下烧烤摊',
          goal: '签定合同',
          details: '客户满意',
        },
        {
          index: '3',
          name: '张顺',
          date: '1996-10-17',
          location: '楼下烧烤摊',
          goal: '签定合同',
          details: '客户满意',
        },
        {
          index: '4',
          name: '张顺',
          date: '1996-10-17',
          location: '楼下烧烤摊',
          goal: '签定合同',
          details: '客户满意',
        },
      ],
      dialogFormVisible: false,
      addForm: {
        name: '',
        date: '',
        location: '',
        goal: '',
        details: '',
      },
    };
  },
  methods: {
    addInfo() {
      this.dialogFormVisible = true;
    },
    pageFn() {
      //
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 0 16px;
  height: calc(100vh - 160px);
  overflow: scroll;
}
.header {
  padding: 10px;
}

.btns {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
::v-deep {
  .header {
    .el-form {
      display: flex;
    }
  }
  .addForm {
    .el-form
      .el-form-item
      .el-form-item__content
      .el-input__inner.el-input__inner {
      width: 300px;
    }
  }
  .el-table {
    min-height: 440px;
  }
  .el-table th.el-table__cell {
    background-color: #1c2238;
    color: #fff;
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
